<template>
    <div style="display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;">
       <div v-for="(item, index) in presonList" :key="index" style="display: flex;align-items: center;width: 48%;border-top: solid 1px #0e8de4;padding-top: 10px;margin-bottom: 20px;"
       :style="{width: screenWidth > 600 ? '48%' : '100%'}">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <img style="width: 200px;height: 260px;object-fit:cover" :src="item.img"></img>
                <div style="width: 110px;height: 30px;line-height: 30px;text-align: center;margin-top: 10px;background-color: #0e8de4;color: #FFF;font-weight: bold;border-radius: 4px;font-size: 14px;">{{ item.rank }}</div>
            </div>
            <div style="display: flex;flex-direction: column;margin-left: 20px;">
                <div style="font-weight: bold;font-size: 20px;"> {{ item.name }} </div>
                <div v-html="item.info"></div>
            </div>
       </div>
    </div>
</template>

<script>
export default {
    components: {  },
    data() {
        return {
            presonList: [
                {img: 'https://xlmp.oss.qly.plus/lessee1/刘卿.png',rank:'教材主编', name: '刘卿', info: '<div>国家认证：企业人力资源管理师（一级）/ 经济师（人力资源）/ SIYB创业讲师</div><div>行业权威：省级精品课程负责人 / 教育部省级“十四五”规划教材主编 / 高级考评员（人力资源&amp;劳动关系）</div><div>教学经验值：贵州省电子商务百名讲师团讲师、国家人力资源管理师高级考评员、劳动关系协调员高级考评员，高校创业指导师。长期开展人力资源管理培训工作，累计培训学员1000余人。被贵州省电商云特聘电子商务一星级讲师；贵州省人才大市场特聘讲师；贵州大学继续教育学院特聘讲师；安顺市劳动力资源开发促进会特聘讲师。</div>'},
                {img: 'https://xlmp.oss.qly.plus/lessee1/佟询 一寸照蓝底.jpg',rank:'团队核心成员', name: '佟珣', info: '<div>国家认证：高校讲师/SYB创业培训师</div><div>行业权威：市场管理员考评员、高级电子商务师、网络创业培训讲师，1+X电商直播师、运营数据分析师，入选省人社厅创业培训专家库。</div><div>教学经验值：执教《人力资源管理》等课程多年，获省级教学奖5项（含2021教学成果一等奖、2022模拟政协提案指导一等奖）。主持院级精品课程，参编《人力资源管理》等教材4部，参建省级精品课程2门。长期深入企业一线实践，观察调研企业选人用人育人的方法渠道。</div>'},
                {img: 'https://xlmp.oss.qly.plus/lessee1/刘颖 一寸照 蓝底.jpg',rank:'团队核心成员', name: '刘颖', info: '<div>国家认证：高校讲师/SIYB创业讲师。</div><div>行业权威：基于省级精品课程建设，分解企业选育用留技能。主持市级科研1项、校级课题1项，参与省级项目2项。</div><div>教学经验值：2008年入职安顺职院，主讲《人力资源管理》等课程，创新"教、学、做、创"立体课堂。参编《人力资源管理》《智慧物流》教材，基于省级精品课程建设，分解企业选育用留技能。发表区域经济论文8篇。开发情景化教学资源库，融合岗位需求调研成果，提升学生适岗能力与实践主动性。</div>'},
                {img: 'https://xlmp.oss.qly.plus/lessee1/胡鹤龄.jpg',rank:'团队核心成员', name: '胡鹤龄', info: '<div>国家认证：高校工商管理讲师/高级电子商务师</div><div>行业权威：省级精品课程主要参与成员/教育部省级“十四五”规划教材副主编</div><div>教学经验值：作为副主编编写《人力资源管理》《电子商务物流》教材2部，参建3项省级精品课程及市级资源库。参与制定3部企业规范（商务局备案），主导3D元宇宙职教工厂项目。深入企业实践，创新开发项目化教学模块，分解岗位技能为可量化任务，编写配套案例库与实训题库。获省市职业院校技能大赛优秀指导教师（3届），具备HR绩效管理与数字化培训经验。</div>'},
                {img: 'https://xlmp.oss.qly.plus/lessee1/杨莹.png',rank:'团队核心成员', name: '杨莹', info: '<div>国家认证：高校讲师/SIYB创业讲师</div><div>行业权威：省级精品课程主要参与成员/教育部省级“十四五”规划教材副主编</div><div>教学经验值：主研省级精品课《人力资源管理》，创新胜任力模型教学，课程通过率92%；培养32名学员，2人获名企HR岗。开发Python人力分析课程，3家企业应用并备案。持SYB讲师资质，设计短视频招聘方案降本35%。副主编教材2部，建思政案例库及微课资源，获省级教学成果奖。</div>'},
                {img: 'https://xlmp.oss.qly.plus/lessee1/孙辉.png',rank:'团队核心成员', name: '孙辉', info: '<div>国家认证：高校工商管理讲师/高级电子商务师</div><div>行业权威：省级精品课程主要参与成员/教育部省级“十四五”规划教材副主编</div><div>教学经验值：作为副主编编写《人力资源管理》《电子商务物流》教材（全国10+院校采用），参建3项省级精品课程及市级资源库。主持3D元宇宙职教工厂项目，制定3部企业规范（商务局备案）。获省市技能大赛优秀指导教师（3届），开发项目化教学模块，融合企业绩效管理经验，发表论文20余篇。</div>'},
                {img: 'https://oss.qly.plus/lessee1/WechatIMG17.jpeg',rank:'团队核心成员', name: '王丽', info: '<div>国家认证：高校副教授/教育部论文评审专家</div><div>行业权威：承担全国商科教育科研课题，并完成多项企业横向技术项目（如大数据精准营销、数智化知识管理系统开发），研究成果应用于企业实践，体现行业影响力。</div><div>教学经验值：2003年至今在西京学院从事经管类专业教学，主讲《经济学》《人力资源管理》《大数据营销》等课程，深耕商科教育20余年，兼具扎实理论功底与产教融合经验。</div>'},
                {img: 'https://oss.qly.plus/lessee1/WechatIMG22.jpeg',rank:'团队核心成员', name: '王新翠', info: '<div>国家认证：高校讲师</div><div>行业权威：多次指导学生参加省级大学生沙盘模拟比赛，荣获一等奖、二等奖、三等奖。</div><div>教学经验值：长期从教于衢州学院商学院，发表学术论文3篇，出版专著1部，2014年至今教授《人力资源管理》《统计学》《计量经济学》等课程。</div>'},
            ],
            screenWidth: window.innerWidth // 初始化屏幕宽度
        }
    },
    mounted() {
    // 获取初始屏幕宽度
    this.updateScreenWidth();
    // 监听窗口大小变化
    window.addEventListener('resize', this.updateScreenWidth);
    },
    beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('resize', this.updateScreenWidth);
    },
    created(){
        
    },
    methods: {
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
